import { request } from '../../request/index.js'
import regeneratorRuntime from '../../lib/runtime/runtime' // 支持es7的js文件引入

// pages/category/index.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        cates: [], // 接口的返回数据
        leftMenuList: [], // 左侧的菜单数据
        rightContent: [], // 右侧的商品数据
        currentIndex: 0, // 当前选中的菜单
        scrollTop: 0 // 右侧内容的滚动条距离顶部的距离
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        /**
         *    web中的本地存储和小程序中的本地存储的区别
         *    1 写代码的方式不一样了
         *        web: localStorage.setItem('key','value')  localStorage.getItem('key')
         *        小程序: wx.setStorageSync('key', 'value') wx.getStorageSync('key')
         *    2 存的时候有没有做转换
         *        web: 不管存的是什么类型的数据,最终会调用toString(),把数据转换成字符串再存入进去
         *        小程序: 不存在类型转换的这个操作，存什么类型的数据进去，获取的时候就是什么类型
         *    3 wx.setStorageSync与wx.setStorage的区别
         *      setStorageSync与wx同步缓存就是必须要同步方法处理完，程序才能继续向下执行
         *      setStorage异步方法无论方法执行成功与否，都会继续向下执行
         *      在微信小程序中，异步不管保没保存成功,程序都会继续往下执行.
         *      同步是等保存成功了,才会执行下面的代码.使用异步,性能会更好;而使用同步,数据会更安全。
         *    
         *    此处的逻辑为:
         *    1.先判断一下本地存储中有没有旧的数据 {time:Date.now(),data: [...]}
         *    2.没有旧数据，直接发送请求
         *    3.有旧数据，同时旧的数据也没有过期，就使用本地存储中的旧数据即可
         */

         // 1.获取本地存储中的数据
        const cateStorage111 = wx.getStorageSync('cateStorage')

        // console.log(Date.now()) // 当前时间戳 1603680177638

        // 2.判断
        if (!cateStorage111) { // 不存在 发送请求
            console.log('不存在旧数据，重新发送请求')
            this.getCates()
            // console.log(cate_storage)
        } else {
            // 有旧数据 过期时间暂时设置成10s 
            // console.log(cate_storage)
            console.log('存在旧数据')
            if (Date.now() - cateStorage111.time > 1000 * 10) { // 数据过期  重新发送请求
                console.log('旧数据过期  重新发送请求')
                this.getCates()
            } else { // 旧数据未过期  引用旧数据
                console.log('旧数据未过期  继续引用旧数据')
                this.cates = cateStorage111.data
                // 左侧的大菜单
                let leftMenuList = this.cates.map(v => v.cat_name)
                // 右侧菜单
                let rightContent = this.cates[0].children
                this.setData({
                    leftMenuList,
                    rightContent
                })
            }
        }
        // this.getCates() // 分类数据
    },

    /**
     * 获取分类数据
     * 常规模式请求
     */
    getCates () {
        // request({ url: '/categories' }).then(res => {
        //     // console.log(res)
        //     if (res.data.meta.status === 200) {
        //         this.cates = res.data.message
        //         console.log(this.cates)

        //         // 把接口的数据存入到本地存储中 此处的cates就是上面的this.cates = res.data.message
        //         wx.setStorageSync('cateStorage', { time: Date.now(), data: this.cates })

        //         // 左侧的大菜单
        //         let leftMenuList = this.cates.map(v => v.cat_name)
        //         // 右侧菜单
        //         let rightContent = this.cates[0].children
        //         this.setData({
        //             leftMenuList,
        //             rightContent
        //         })
        //         console.log(leftMenuList, rightContent)
        //     }
        // })
    },

    /** 
     * async语法 async同步的意思
     * 使用es7的async await来发送请求.
     * await request({ url: '/categories' })这一步是异步代码
     * const res = await request({ url: '/categories' })变成同步代码
     * 所以res请求不成功的话，下面的代码是执行不了的
     */
    async getCates () {
        const res = await request({ url: '/categories' })
        // console.log(res)
        // this.cates = res.data.message
        this.cates = res
        console.log(this.cates)

        // 把接口的数据存入到本地存储中 此处的cates就是上面的this.cates = res.data.message
        wx.setStorageSync('cateStorage', { time: Date.now(), data: this.cates })

        // 左侧的大菜单
        let leftMenuList = this.cates.map(v => v.cat_name)
        // 右侧菜单
        let rightContent = this.cates[0].children
        this.setData({
            leftMenuList,
            rightContent
        })
        // console.log(leftMenuList, rightContent)
    },

    /**
     * 点击左侧菜单栏切换菜单的点击事件
     */
    handleItemTap (e) {
        console.log(e)
        const { index } = e.currentTarget.dataset
        // 右侧菜单需要跟着变化
        let rightContent = this.cates[index].children
        // console.log(index)
        this.setData({
            currentIndex: index,
            rightContent,
            scrollTop: 0 // 点击左侧菜单栏，重新设置右侧内容的scroll-view标签的距离顶部的距离
        })
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        this.getTabBar().setData({
            selected: 1, // 首页 显示下标
        })
    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {

    }
})

